<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>{{ rzApplyStore.getRole == 'guarantor' ? '保证人' : '承租人' }}信息补充</h2>
      </div>
      <div class="content">
        <a-form :model="formData" layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              基本信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="婚姻状况：" name="custMarriage">
                    <a-select v-model:value="formData.custMarriage" placeholder="请选择" style="width: 280px">
                      <a-select-option v-for="item in rzApplyStore.getCustMarriage" :key="item.valueCode" :value="item.valueCode">{{
                        item.valueName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="是否有子女：" name="hasChildren">
                    <a-select v-model:value="formData.hasChildren" placeholder="请选择" style="width: 280px">
                      <a-select-option v-for="item in rzApplyStore.getHasChildren" :key="item.valueCode" :value="item.valueCode">{{
                        item.valueName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="教育程度：" name="custEducation">
                    <a-select v-model:value="formData.custEducation" placeholder="请选择" style="width: 280px">
                      <a-select-option v-for="item in rzApplyStore.getCustEducation" :key="item.valueCode" :value="item.valueCode">{{
                        item.valueName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              配偶信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="姓名：" name="spouse.custName">
                    <a-input v-model:value="formData.spouse.custName" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="民族：" name="spouse.custNationCode">
                    <a-select
                      label-in-value
                      v-model:value="formData.spouse.custNationCode"
                      placeholder="请选择"
                      style="width: 280rem"
                      @change="nationChange"
                    >
                      <a-select-option v-for="item in rzApplyStore.getNationData" :key="item.value" :value="item.vlaue">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="手机号：" name="spouse.custMobile">
                    <a-input v-model:value="formData.spouse.custMobile" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="身份证号码：" name="spouse.certNo">
                    <a-input v-model:value="formData.spouse.certNo" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="证件有效期：" name="spouse.certDate">
                    <a-range-picker v-model:value="formData.spouse.certDate" type="date" :placeholder="['请选择','请选择']" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="" name="spouse.certLongTerm" :wrapper-col="{ span: 0, offset: 0 }">
                    <a-radio-group v-model:value="formData.spouse.certLongTerm">
                      <a-radio value="Y">长期有效</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              职业及收入信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="个人年收入：" name="webDealerPIncome">
                    <a-input v-model:value="formData.webDealerPIncome" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="家庭年收入：" name="webDealerFIncome">
                    <a-input v-model:value="formData.webDealerFIncome" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>

          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              回款账户信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="账户名称：" name="accountName">
                    <a-input v-model:value="formData.accountName" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="开户银行：" name="accountBankCode">
                    <a-input v-model:value="formData.accountBankCode" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="银行卡号：" name="account">
                    <a-input v-model:value="formData.account" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="银行签约手机号：" name="phoneNo">
                    <a-input v-model:value="formData.phoneNo" placeholder="请输入" style="width: 280px" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              送达信息
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="省份(证件)：" name="addressRegion">
                    <a-cascader
                      v-model:value="formData.addressRegion"
                      :options="regionData"
                      style="width: 280rem"
                      @change="(e, selectedOptions) => regionChange(e, selectedOptions)"
                      :field-names="{ label: 'areaName', value: 'areaId', children: 'children' }"
                      placeholder="请选择"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="21">
                  <a-form-item label="详细地址：" name="custAddress">
                    <a-input v-model:value="formData.custAddress" placeholder="请输入详细地址" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>

          <div class="info-item" v-if="rzApplyStore.getRole == 'guarantor'">
            <div class="info-title">
              <img src="/@/assets/images/detail_title.png" alt="" />
              担保方式
            </div>
            <div class="info-content">
              <a-row :gutter="20">
                <a-col :span="8">
                  <a-form-item label="担保方式：" name="t">
                    <a-select v-model:value="formData.p" placeholder="请选择担保方式" style="width: 280px">
                      <a-select-option value="保证担保">保证担保</a-select-option>
                      <a-select-option value="抵押担保">抵押担保</a-select-option>
                      <a-select-option value="质押担保">质押担保</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <a-col :span="24">
            <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
              <div class="next">
                <a-button type="primary" @click="onSubmit" class="submit">保存</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { region } from '/@/config/address.js';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  import dayjs from 'dayjs';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const regionData = ref(region);
  const province = ref(regionData);
  const city = ref([]);
  const area = ref([]);
  const labelCol = ref({ style: { width: '120px' } });
  const wrapperCol = ref({ span: 14 });
  const role = ref('');
  const formData = ref({
    custSex: '',
    bussNo: '',
    custName: '',
    custNationCode: '',
    custNationValue: '',
    custMarriage: '',
    hasChildren: '',
    certNo: '',
    certStartDate: '',
    certEndDate: '',
    certLongTerm: '',
    custEducation: '',
    custHomeplaceCode: '',
    custHomeplaceValue: '',
    custHomeplace: '',
    custMobile: '',
    custAddressCode: '',
    custAddressValue: '',
    custAddress: '',
    sortIndex: 0,

    addressRegion: [],
    addressRegionOption: { code: '', value: '' },

    accountName: '',
    accountBankCode: '',
    account: '',
    phoneNo: '',
    webDealerPIncome: null,
    webDealerFIncome: null,
    spouse: {
      custSex: '',
      custName: '',
      custNationCode: '',
      custNationValue: '',
      certNo: '',
      certDate: [],
      certStartDate: '',
      certEndDate: '',
      certLongTerm: '',
      custMobile: '',
    },
  });

  async function onSubmit() {
    console.log(rzApplyStore.getGuarantor);
    if (rzApplyStore.getRole == 'guarantor') {
      const prev = rzApplyStore.getGuarantor;
      const param = {
        bussNo: rzApplyStore.getBussNo,
        custName: prev.custName,
        custNationCode: prev.custNationCode,
        custNationValue: prev.custNationValue,
        custMarriage: formData.value.custMarriage,
        hasChildren: formData.value.hasChildren,
        certNo: prev.certNo,
        certStartDate: prev.certStartDate,
        certEndDate: prev.certEndDate,
        certLongTerm: prev.certLongTerm,
        custEducation: formData.value.custEducation,
        custHomeplaceCode: prev.custHomeplaceCode,
        custHomeplaceValue: prev.custHomeplaceValue,
        custHomeplace: prev.custHomeplace,
        custMobile: prev.custMobile,
        custAddressCode: formData.value.addressRegionOption.code,
        custAddressValue: formData.value.addressRegionOption.value,
        custAddress: formData.value.custAddress,
        webDealerPIncome: formData.value.webDealerPIncome,
        webDealerFIncome: formData.value.webDealerFIncome,
        accountName: formData.value.accountName,
        accountBankCode: formData.value.accountBankCode,
        account: formData.value.account,
        phoneNo: formData.value.phoneNo,
        sortIndex: await getSortIndex('guarantor'), //todo
        spouse: {
          custName: formData.value.spouse.custName,
          custNationCode: formData.value.spouse.custNationCode,
          custNationValue: formData.value.spouse.custNationValue,
          certNo: formData.value.spouse.certNo,
          certStartDate: formData.value.spouse.certDate[0] ? dayjs(formData.value.spouse.certDate[0]).format('YYYY-MM-DD') : '',
          certEndDate: formData.value.spouse.certDate[1] ? dayjs(formData.value.spouse.certDate[1]).format('YYYY-MM-DD') : '',
          certLongTerm: formData.value.spouse.certLongTerm ? 'Y' : 'N',
          custMobile: formData.value.spouse.custMobile,
        },
      };
      const apply = {
        natureAddForm: rzApplyStore.getGuarantor.role == 1 ? param : {},
        legalAddForm: rzApplyStore.getGuarantor.role == 2 ? param : {},
        verifyCode: '',
      };
      const res = await rzApplyApi
        .guarantorVerify(apply)
        .then((res) => {
          if (res.code == 0) {
            if (res.data.verifyCode == 'Y') {
              rzApplyApi.guarantorAddOrUpdate(apply).then((res) => {
                if (res.code == 0) {
                  rzApplyStore.setGuarantor(null);
                  router.go(-2);
                  router.replace({
                    path: '/rzApply/surety-list',
                    query: {
                      bussNo: formData.value.bussNo,
                      mode: rzApplyStore.getMode,
                    },
                  });
                }
              });
            } else {
              rzApplyApi.guarantorTempSave(apply).then((res) => {
                if (res.code == 0) {
                  rzApplyStore.setGuarantor(null);
                  router.go(-2);
                  router.replace({
                    path: '/rzApply/surety-list',
                    query: {
                      bussNo: formData.value.bussNo,
                      mode: rzApplyStore.getMode,
                    },
                  });
                }
              });
            }
          } else {
            message.warning({ message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err, 'aaaa');
        });
    } else {
      const prev = rzApplyStore.getLessee;
      const param = {
        bussNo: rzApplyStore.getBussNo,
        custName: prev.custName,
        custNationCode: prev.custNationCode,
        custNationValue: prev.custNationValue,
        custMarriage: formData.value.custMarriage,
        hasChildren: formData.value.hasChildren,
        certNo: prev.certNo,
        certStartDate: prev.certStartDate,
        certEndDate: prev.certEndDate,
        certLongTerm: prev.certLongTerm,
        custEducation: formData.value.custEducation,
        custHomeplaceCode: prev.custHomeplaceCode,
        custHomeplaceValue: prev.custHomeplaceValue,
        custHomeplace: prev.custHomeplace,
        custMobile: prev.custMobile,
        custAddressCode: formData.value.addressRegionOption.code,
        custAddressValue: formData.value.addressRegionOption.value,
        custAddress: formData.value.custAddress,
        webDealerPIncome: formData.value.webDealerPIncome,
        webDealerFIncome: formData.value.webDealerFIncome,
        accountName: formData.value.accountName,
        accountBankCode: formData.value.accountBankCode,
        account: formData.value.account,
        phoneNo: formData.value.phoneNo,
        sortIndex: await getSortIndex('lessee'), //todo
        spouse: {
          custName: formData.value.spouse.custName,
          custNationCode: formData.value.spouse.custNationCode,
          custNationValue: formData.value.spouse.custNationValue,
          certNo: formData.value.spouse.certNo,
          certStartDate: formData.value.spouse.certDate[0] ? dayjs(formData.value.spouse.certDate[0]).format('YYYY-MM-DD') : '',
          certEndDate: formData.value.spouse.certDate[1] ? dayjs(formData.value.spouse.certDate[1]).format('YYYY-MM-DD') : '',
          certLongTerm: formData.value.spouse.certLongTerm ? 'Y' : 'N',
          custMobile: formData.value.spouse.custMobile,
        },
      };
      const apply = {
        natureAddForm: rzApplyStore.getLessee.role == 1 ? param : {},
        legalAddForm: rzApplyStore.getLessee.role == 2 ? param : {},
        verifyCode: '',
      };
      const res = await rzApplyApi
        .lesseeVerify(apply)
        .then((res) => {
          if (res.code == 0) {
            if (res.data.verifyCode == 'Y') {
              rzApplyApi.lesseeAddOrUpdate(apply).then((res) => {
                if (res.code == 0) {
                  rzApplyStore.setLessee(null);
                  router.replace({
                    path: '/rzApply/lessee-list',
                    query: {
                      bussNo: formData.value.bussNo,
                      mode: rzApplyStore.getMode,
                    },
                  });
                }
              });
            } else {
              rzApplyApi.lesseeTempSave(apply).then((res) => {
                if (res.code == 0) {
                  rzApplyStore.setLessee(null);
                  router.replace({
                    path: '/rzApply/lessee-list',
                    query: {
                      bussNo: formData.value.bussNo,
                      mode: rzApplyStore.getMode,
                    },
                  });
                }
              });
            }
          } else {
            message.warning({ message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err, 'aaaa');
        });
    }
  }
  async function getSortIndex(role) {
    if (role == 'lessee') {
      const res = await rzApplyApi.lesseePartInfoList({ bussNo: rzApplyStore.getBussNo });
      if (res.code == 0) {
        return Promise.resolve(res.data.length);
      }
      return Promise.reject(0);
    } else {
      const res = await rzApplyApi.guarantorList({ bussNo: rzApplyStore.getBussNo });
      if (res.code == 0) {
        return Promise.resolve(res.data.length);
      }
      return Promise.reject(0);
    }
  }
  function nationChange(e) {
    formData.value.spouse.custNationValue = e.label[0].children;
    formData.value.spouse.custNationCode = e.value;
  }
  function onUpload(fileList, type) {
    if (type == 'fontUrl') {
      formData.value.fontUrl = fileList;
    } else {
      formData.value.backUrl = fileList;
    }
    form.feedbackAttachment = fileList;
  }
  function regionChange(e, selectedOptions) {
    formData.value.addressRegionOption = {
      code: selectedOptions[selectedOptions.length - 1].areaId,
      value: selectedOptions.map((item) => item.areaName).join(' '),
    };
    return;
  }
  onMounted(() => {
    const query = route.query;
    formData.value.bussNo = query.bussNo;
    role.value = query.role;
    console.log(rzApplyStore.lesseeInfo.bussNo);
  });
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    display: flex;
    flex-direction: column;
    /deep/ .ant-form {
      width: 100%;
      .info-item {
        width: 100%;
      }
    }
    .top {
      margin-bottom: 42rem;
      display: flex;
      align-items: center;
      position: relative;
      h2 {
        width: 100%;
        font-family: Microsoft YaHei;
        font-size: 30px;
        color: #000000;
        margin-bottom: 0;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .content {
      flex: 1;
      overflow: auto;
    }
  }
</style>
